import {PageWrapperBox, TableContainerBox} from "@/layout/Page";
import styled from "styled-components";
import styles from "./index.module.scss"
import {Button, Divider, Flex, Form, Input, Select, Space, Table, Tree} from "antd";
import {PlusOutlined, SwapOutlined} from "@ant-design/icons";
import {useEffect, useMemo, useRef, useState} from "react";
import {deptTreeSelect, listUser} from "@/api/system/user.ts";
import EditModal from "./EditModal.tsx";


const RightBox = styled.div`
    width: 80%;
`


export default function () {

    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([])
    const [total, setTotal] = useState(0)
    const editDialogRef = useRef<any>()
    const columns: any = [
        {
            title: '用户编号',
            dataIndex: 'menuName',
            key: 'menuName',
            align: "center",
            width: 200,
        },
        {
            title: '用户名称',
            dataIndex: 'userName',
            key: 'userName',
            align: "center",
            width: 100,
        },
        {
            title: '用户昵称',
            dataIndex: 'nickName',
            key: 'nickName',
            align: "center",
            width: 100,
        },
        {
            title: '部门',
            dataIndex: 'username',
            key: 'username',
            align: "center",
            width: 100,
        },
        {
            title: '手机号码',
            dataIndex: 'phonenumber',
            key: 'phonenumber',
            align: "center",
            width: 100,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: "center",
            width: 100,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: "center",
            width: 200,
        },
        {
            title: '操作',
            key: 'action',
            width: 200,
            align: "center",
            render: (text: any, record: any, index: any) => {
                return <Space>
                    <a type={"primary"}>编辑</a>
                    <a type={"primary"}>删除</a>
                </Space>
            },
        },
    ]


    const handleQuery = () => {
        setLoading(true)
        listUser(null).then((res: any) => {
            setData(res.rows)
            setTotal(res.total)
        }).finally(() => {
            setLoading(false)
        })
    }

    useEffect(() => {
        handleQuery()
    }, [])


    return <PageWrapperBox style={{display: "flex"}}>
        <div className={styles.leftBox}>
            <DeptTree></DeptTree>
        </div>
        <RightBox>
            <TableContainerBox>
                <Flex gap="small" vertical>
                    <Form layout={"inline"}>
                        <Form.Item label="用户名称">
                            <Input placeholder="请输入用户名称"></Input>
                        </Form.Item>
                        <Form.Item label="手机号码">
                            <Input placeholder="请输入手机号码"></Input>
                        </Form.Item>
                        <Form.Item label="状态">
                            <Select style={{width: 160}} placeholder="请选择角色状态"></Select>
                        </Form.Item>
                        <Form.Item label="创建时间">
                            <Select placeholder="请选择角色状态"></Select>
                        </Form.Item>
                        <Form.Item>
                            <Space>
                                <Button type="primary" onClick={handleQuery}>查询</Button>
                                <Button>重置</Button>
                            </Space>
                        </Form.Item>
                    </Form>
                    <Divider style={{margin: "8px"}}/>
                </Flex>
                <Flex align="center" gap="small" style={{marginBottom: 6}}>
                           <Button type={"primary"} icon={<PlusOutlined/>}
                            onClick={() => editDialogRef.current.addModal()}>新增</Button>
                    <Button type={"default"} icon={<SwapOutlined/>}>展开/折叠</Button>
                </Flex>
                <Table
                    rowKey="menuId"
                    loading={loading}
                    tableLayout="auto"
                    dataSource={data}
                    columns={columns}
                    scroll={
                        {x: 'auto'}
                    }
                    pagination={false}
                >
                </Table>

            </TableContainerBox>
        </RightBox>
        <EditModal ref={editDialogRef}/>
    </PageWrapperBox>
}


const {Search} = Input;

function DeptTree() {


    const [data, setData] = useState([])
    const [searchValue, setSearchValue] = useState('');
    const [autoExpandParent, setAutoExpandParent] = useState(true);
    const handleQuery = () => {
        deptTreeSelect().then((res) => {
            setData(res.data)
        })
    }


    useEffect(() => {
        handleQuery()
    }, []);

    const onExpand = (newExpandedKeys: React.Key[]) => {
        // setExpandedKeys(newExpandedKeys);
        setAutoExpandParent(false);
    };

    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // const { value } = e.target;
        // const newExpandedKeys = dataList
        //     .map((item) => {
        //         if (item.title.indexOf(value) > -1) {
        //             return getParentKey(item.key, defaultData);
        //         }
        //         return null;
        //     })
        //     .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i));
        // setExpandedKeys(newExpandedKeys);
        // setSearchValue(value);
        // setAutoExpandParent(true);
    };

    const treeData = useMemo(() => {
        const loop = (data: any[]): any[] =>
            data.map((item) => {
                const strTitle = item.label as string;
                const index = strTitle.indexOf(searchValue);
                const beforeStr = strTitle.substring(0, index);
                const afterStr = strTitle.slice(index + searchValue.length);
                const title =
                    index > -1 ? (
                        <span key={item.key}>
              {beforeStr}
                            <span className="site-tree-search-value">{searchValue}</span>
                            {afterStr}
            </span>
                    ) : (
                        <span key={item.key}>{strTitle}</span>
                    );
                if (item.children) {
                    return {title, key: item.key, children: loop(item.children)};
                }

                return {
                    title,
                    key: item.key,
                };
            });

        return loop(data);
    }, [data, searchValue]);


    return <>
        <Search style={{marginBottom: 8}} placeholder="请输入部门名称" onChange={onChange}/>
        <Tree
            onExpand={onExpand}
            autoExpandParent={autoExpandParent}
            treeData={treeData}
        />
    </>
}
